<template>
  <div>
    讲师列表
    <div v-for="(item,index) in items" :key="index">
      <a :href="'teacher/'+item.id">{{ item.name }}</a>
    </div>
  </div>
</template>
<script>
import teacherApi from '~/api/teacher'
export default {
  // 异步获取数据
/*
asyncData 方法
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法， asyncData 方法会在组件（限于页面组件）每次加载 之前被调用。它可以在服务端或路由更新之前被调用。 你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法 返回的数据一并返回给当前组件。

注意：
由于 asyncData 方法是在组件 初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
* */
  async asyncData() {
    console.log('asyncData')
    const response = await teacherApi.getList()
    // 最好用async await
    // 因为我们可能需要拉取多个接口去渲染页面
    console.log(response)
    return {
      items: response.data.items
    }
  },

  data() {
    return {
      test: 'test' // 这里的数据最后会和asyncData中的数据定义合并
    }
  }
}
</script>

<style scoped>

</style>
